<style lang="less" scoped>
  @import "../../../styles/common.less";
</style>

<template>
  <div class="body-content">
    <Row>
      <Col span="24">
        <Card>
          <p slot="title">
            用户列表
          </p>
          <Row class="margin-top-10">
            <Input placeholder="请输入用户名搜搜..." style="width: 200px" />
            <span style="margin: 0 10px;"><Button type="primary" icon="search">搜索</Button></span>
            <Button type="ghost" @click="handleAdd">新增</Button>
            <Button type="ghost" @click="refreshWithPage">刷新</Button>
          </Row>
          <Row class="margin-top-10">
            <page-table refs="table" :loading="loading" :columnsList="columnsList" :value="tableData" :currentPage="pageInfo.currentPage" :total="pageInfo.totalCount" :pageSize="pageInfo.pageSize" @on-edit="handleEdit" @on-delete="handleDel" @on-change-page="changePage" @get-select-ids="getSelectIds" @on-delete-batch="handleDelBatch" :isBatchDelButton="false" @on-change-status-batch="handleChangeStatusBatch" :isBatchChangeStatusButton="true"></page-table>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import pageTable from '@/views/my-components/table/page-table.vue'
import iView from 'iview'
import Vue from "vue"
import util from '@/libs/util.js'
//  资源上请求内容
import dataApi from "@/api/system/user.js"

Vue.use(iView)

export default {
  name: 'system-user',
  data () {
    return {
      //  分页信息
      pageInfo: {
        currentPage: 1,
        totalCount: 0,
        pageSize: util.pageInfo.pageSize
      },
      //  选中的行编号
      selectIds: [],
      //  列表表头
      columnsList: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          key: 'id'
        },
        {
          title: '用户名',
          key: 'username',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.username)
            ])
          }
        },
        {
          title: '用户昵称',
          key: 'nickname'
        },
        {
          title: 'Action',
          key: 'action',
          width: 200,
          align: 'center',
          handle: ['edit']
        }
      ],
      //  列表数据
      tableData: [],
      //  加载状态
      loading: false
    }
  },
  components: {
    pageTable
  },
  computed: {
  },
  methods: {
    //  添加跳转指定页面
    handleAdd () {
      this.$router.push({
        name: 'system-user-edit',
        query: {page: this.pageInfo.currentPage}
      })
    },
    //  编辑跳转指定页面
    handleEdit (val, index) {
      this.$router.push({
        name: 'system-user-edit',
        query: {id: val[index].id, page: this.pageInfo.currentPage}
      })
    },
    //  单条删除
    handleDel (val, index) {
      return new Promise((resolve, reject) => {
        if (val[index].id <= 2) {
          this.$Message.error('超级管理员不能删除')
          return resolve(true)
        }
        dataApi.del(val[index].id).then(
          res => {
            this.$Message.success(res.msg)
            this.tableData.splice(index, 1)
          }
        )
      })
    },
    //  批量删除
    handleDelBatch (ids) {
      dataApi.del(ids).then(
        res => {
          this.$Message.success(res.msg)
          ids.forEach(id => {
            this.tableData.splice(id, 1)
          })
        }
      )
    },
    //  批量启用禁用
    handleChangeStatusBatch (ids, type) {
      console.log(ids)
      console.log(type)
    },
    //  分页改变
    changePage (page) {
      // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
      // this.tableData1 = this.mockTableData1();
      this.pageInfo.currentPage = page
      iView.LoadingBar.start()
      this.refreshWithPage().then(
        () => {
          iView.LoadingBar.finish()
        }
      )
    },
    //  分页查询
    refreshWithPage () {
      let vm = this
      vm.loading = true
      iView.LoadingBar.start();
      return new Promise((resolve, reject) => {
        dataApi.pageList({
          limit: vm.pageInfo.pageSize,
          page: vm.pageInfo.currentPage
        }).then(
          res => {
            vm.tableData = res.totalItems
            vm.pageInfo.totalCount = res.data.totalCount
            vm.loading = false
            iView.LoadingBar.finish()
          }
        )
      })
    },

    getSelectIds (selectIds) {
      this.selectIds = selectIds
    }
  },
  created () {
    this.pageInfo.currentPage = this.$route.query.page ? this.$route.query.page : 1
    this.refreshWithPage()
  },
  updated () {
    /*
    this.$nextTick(function () {
      // 返回页面取出来
      let position = this.$store.state.app.position
      window.scroll(0, position)
    })
    */
  },
  activated () {
    // this.pageInfo.currentPage = this.$route.query.page ? this.$route.query.page : 1
    this.refreshWithPage()
  }
}
</script>
